<template>
    <div class="main">
        <div class="xzxy-title">
            <img src="~/assets/images/index-sb/xzxy-xzzy-title.png" alt="" />
        </div>
        <div class="index-zyfz">
            <div class="xzxy-item" @click="go('/school/vipzjkc')">
                <img
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index_sb_img/xzxy-xzyx-textbj.png"
                    alt=""
                    class="bj"
                />
                <div class="info">
                    <div class="name">小竹财税</div>
                    <div class="text">
                        财税人的职业管家，财税人需要什么、小竹就生产什么，专家团队、冠军团队
                    </div>
                    <div class="link">
                        查看全部课程
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </div>
            </div>
            <div class="xzxy-item" @click="go('')">
                <img
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index_sb_img/xzxy-xzyx-textbj.png"
                    alt=""
                    class="bj"
                />
                <div class="info">
                    <div class="name">敬请期待</div>
                    <div class="text"></div>
                    <!-- <div class="link">
                    查看全部课程
                    <i class="el-icon-arrow-right"></i>
                </div> -->
                </div>
            </div>
            <div class="xzxy-item" @click="go('')">
                <img
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index_sb_img/xzxy-xzyx-textbj.png"
                    alt=""
                    class="bj"
                />
                <div class="info">
                    <div class="name">敬请期待</div>
                    <div class="text"></div>
                    <!-- <div class="link">
                    查看全部课程
                    <i class="el-icon-arrow-right"></i>
                </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    async asyncData({ params }) {
        let data = {};
        return data;
    },
    layout: "home",
    head() {
        return {
            title: "会计知识专业问答-财税会计知识问答-小竹财税官网",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税小竹财税汇集税收法规、会计法规、财税资讯、财税学院、财税工具、财税企服等版块，打造一站式财税服务平台，让天下没有难懂的财税。",
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content:
                        "税收法规,会计法规,财税资讯,财税学院,财税工具,财税企服",
                },
            ],
        };
    },
    components: {},
    data() {
        return {};
    },
    beforeMount() {},
    created() {},
    mounted() {},
    computed: {},
    watch: {},
    methods: {
        go(path) {
            if (!path) {
                this.$alert("敬请期待：小主，我马上催老师起床录课！", "提示", {
                    confirmButtonText: "确定",
                });
                return;
            }
            if (this.$route.query.type == 1) {
                this.$router.push({
                    path: "/school/kzzt",
                });
                return;
            }
            if (this.$route.query.type == 2) {
                this.$router.push({
                    path: "/school/sckc",
                });
                return;
            }
            this.$router.push({
                path: path,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.main {
    background-image: url(~/assets/images/index-sb/xzxy-bj.png);
    background-size: 100% 100%;
    padding: 60px 0;
}
.index-zyfz {
    display: flex;
    justify-content: center;
}

.xzxy-title {
    width: 315px;
    height: 58px;
    display: block;
    margin: 0 auto 50px;
    
    img{
        width: 100%;
        height: 100%;
    }
}

.xzxy-item {
    width: 18.5vw;
    height: 37.7vw;
    position: relative;
    margin-right: 3.5vw;
    cursor: pointer;
    &:last-child {
        margin-right: 0;
    }
    .bj {
        width: 100%;
        height: 100%;
    }
    .info {
        position: absolute;
        width: 80%;
        left: 10%;
        top: 1.5vw;

        .name {
            font-weight: 700;
            font-size: 24px;
            color: #1b87f2;
        }
        .text {
            padding-top: 1.65vw;
            font-weight: 400;
            font-size: 18px;
            color: #666666;
            line-height: 31px;
        }
        .link {
            padding-top: 1.2vw;
            font-weight: 500;
            font-size: 16px;
            color: #999999;
            display: flex;
            align-items: center;
            justify-content: center;
            i {
                display: block;
                width: 14px;
                height: 14px;
                border-radius: 14px;
                font-size: 12px;
                color: #ffffff;
                text-align: center;
                line-height: 14px;
                background-color: #999999;
                margin-left: 6px;
            }
        }
    }
}
</style>